<template>  
    <div class="login-page">  
      <v-container fluid fill-height>  
        <v-layout align-center justify-center>  
          <v-flex xs12 sm8 md4>  
            <v-card class="elevation-20">  
              <v-card-title>  
                <h3 class="headline mb-0">Login</h3>  
              </v-card-title>  
    
              <v-card-text>  
                <v-form @submit.prevent="login">  
                  <v-text-field  
                    v-model="username"  
                    label="Username"  
                    required  
                  ></v-text-field>  
    
                  <v-text-field  
                    v-model="password"  
                    label="Password"  
                    type="password"  
                    required  
                  ></v-text-field>  
    
                  <v-btn color="primary" block @click="login" :disabled="!isValidForm">Login</v-btn>  
                </v-form>  
              </v-card-text>  
    
              <v-card-actions>  
                <span class="caption--grey">Don't have an account? Register here</span>  
              </v-card-actions>  
            </v-card>  
          </v-flex>  
        </v-layout>  
      </v-container>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        username: '',  
        password: '',  
      };  
    },  
    computed: {  
      isValidForm() {  
        return this.username.trim() !== '' && this.password.trim() !== '';  
      },  
    },  
    methods: {  
      login() {  
        // 这里添加登录逻辑，比如发送请求到后端进行验证  
        if (this.username === 'admin' && this.password === 'password') {  
          // 登录成功处理  
          this.$router.push('/dashboard'); // 假设登录成功后跳转到仪表盘页面  
        } else {  
          // 登录失败处理  
          this.$snackbar.text('Invalid username or password.');  
        }  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  .login-page {  
    background-color: #f2f2f2;  
  }  
    
  .v-card {  
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);  
  }  
    
  .v-btn {  
    margin-top: 16px;  
  }  
  </style>